<script setup>

const props = defineProps({
  searchName: {
    type: String,
    default: "名称"
  }
});
const content = ref({
  name: "",
  date: "",
  status: "",
});
const emit = defineEmits(['query']);
const query = () => {
  emit('query', content.value);
};
const reset = () => {
  content.value = {
    name: "",
    date: "",
    status: "",
  };
};
</script>

<template>
  <div class="jia-search">
    <div class="jia-search-name jia-flex-center">
      <span>{{ searchName }}</span>
      <a-input v-model="content.name" :style="{ width: '250px', borderRadius: '5px' }" placeholder="请输入查询的内容"
               allow-clear></a-input>
    </div>
    <div class="jia-search-date jia-flex-center">
      <span>选择时间</span>
      <a-date-picker v-model="content.date" style="width: 200px; border-radius: 5px"/>
    </div>
    <div class="jia-search-status jia-flex-center">
      <span>状态</span>
      <a-select v-model="content.status" :style="{ width: '100px', borderRadius: '5px' }" placeholder="状态">
        <a-option :value="true">启用</a-option>
        <a-option :value="false">禁用</a-option>
      </a-select>
    </div>
    <div class="jia-btn jia-flex-center">
      <a-button type="outline" status="danger" style="border-radius: 5px;
                margin-right: 10px" @click="reset">
        重置
      </a-button>
      <a-button type="primary" style="border-radius: 5px" @click="query">查询</a-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.jia-search {
  width: 100%;
  height: 40px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;

  span {
    font-size: 14px;
    margin-right: 7px;
  }

  .jia-search-name {
    width: 330px;
    height: 100%;
  }

  .jia-search-date {
    width: 280px;
    height: 100%;
  }

  .jia-search-status {
    width: 170px;
    height: 100%;
  }

  .jia-btn {
    width: 135px;
    height: 100%;
  }
}
</style>